<template>
  <div class="app-container">
    <el-dialog title="批量登记" :visible.sync="open" width="90%" append-to-body :before-close="handleClose">
      <el-input type="textarea" v-model="text" placeholder="串号 机型 回收金额 店员名称 公司门店" :rows="4" />

      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <el-select v-model="form.offerName"  style="width: 90%" filterable placeholder="请选择报价师">
            <el-option
              v-for="dict in offerNameOptions"
              :key="dict.userId"
              :label="dict.nickName"
              :value="dict.userId"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="formulaIndex" style="width: 90%" placeholder="请选择公式" filterable clearable>
            <el-option v-for="(formula, index) in formulaOptions"
                       :label="formula.formulaName" :value="index" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker clearable size="small" style="width: 90%"
                          v-model="form.offerTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择回收时间" @change="offerTimeChange">
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-select v-model="form.companyId" placeholder="请选择供应商" filterable clearable size="small" @change="companyChange">
            <el-option
              v-for="supplier in supplierList"
              :label="supplier.supplierName" :value="supplier.supplierId" />
          </el-select>
        </el-col>
      </el-row>

      <div style="margin:10px 0">
        <el-button @click="handleAddsExp" type="warning" plain>导入</el-button>
        <el-button @click="handleClear" style="margin-left: 10px;" type="danger" plain>清空</el-button>
        <el-button @click="submitList" style="margin-left: 10px;" type="success" plain>提交</el-button>
        <div style="display: inline-block;margin-left: 20px;font-weight: bold;color: #606266;font-size: 18px">报价金额合计: {{priceTotal}}</div>
      </div>

      <el-table :data="list" border style="margin-top: 10px">
        <el-table-column label="编号" type="index" />
        <el-table-column label="机型" align="center" prop="modelName">
          <template v-slot="scope">
            <el-input v-model="scope.row.modelName"/>
          </template>
        </el-table-column>
        <el-table-column label="串号" align="center" prop="modelSn">
          <template v-slot="scope">
            <el-input v-model="scope.row.modelSn"/>
          </template>
        </el-table-column>
        <el-table-column label="公司信息" align="center" prop="companyInfo">
          <template v-slot="scope">
            <el-input v-model="scope.row.companyInfo"/>
          </template>
        </el-table-column>
        <el-table-column label="报价师" align="center" prop="offerName">
          <template v-slot="scope">
            <el-select v-model="scope.row.offerName" filterable placeholder="请选择报价师">
              <el-option
                v-for="dict in offerNameOptions"
                :key="dict.userId"
                :label="dict.nickName"
                :value="dict.userId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="转账方式" align="center" prop="tranType">
          <template v-slot="scope">
            <el-select v-model="scope.row.tranType" placeholder="请选择转账方式">
              <el-option v-for="pay in payTypeOptions" :label="pay.label" :value="pay.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="回收时间" align="center" prop="offerTime">
          <template v-slot="scope">
            <el-date-picker clearable size="small" style="width: 90%"
                            v-model="scope.row.offerTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择回收时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="报价金额" align="center" prop="price">
          <template v-slot="scope">
            <el-input v-model="scope.row.price" type="number" @blur="mathPriceTotal" />
          </template>
        </el-table-column>
        <el-table-column label="返利一" align="center" prop="priceOne" width="100">
          <template v-slot="scope">
            <el-input v-model="scope.row.priceOne" type="number" />
          </template>
        </el-table-column>
        <el-table-column label="返利二" align="center" prop="priceTwo" width="100">
          <template v-slot="scope">
            <el-input v-model="scope.row.priceTwo" type="number" />
          </template>
        </el-table-column>
        <el-table-column label="返利三" align="center" prop="priceThree" width="100">
          <template v-slot="scope">
            <el-input v-model="scope.row.priceThree" type="number" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {addCollectList} from "@/api/store/collect";

export default {
  name: "collect-add-list",
  props: {
    // 报价师字典
    offerNameOptions: {type: Array},
    //返利公式
    formulaOptions: {type: Array},
    open: {type: Boolean, default: false},
    //供应商
    supplierList: {type: Array, default: []}
  },
  watch: {
    open() {
      this.handleClear();
    }
  },
  data() {
    return {
      priceTotal: 0,
      comName: null,
      //供应商
      supplierList: [],
      text: "",
      formulaIndex: null,
      form: {
        offerName: undefined,
        //回收时间
        offerTime: null,
        companyId: null
      },
      list: [],
      payTypeOptions:[
        {label:'支付宝',value:1, tagType: ''},
        {label: '微信',value: 2, tagType: 'success'},
        {label: '银行卡',value: 3, tagType: 'warning'}],
    }
  },
  methods: {
    offerTimeChange() {
      this.list.forEach(item => {
        item.offerTime = this.form.offerTime;
      })
    },
    //计算金额总和
    mathPriceTotal() {
      this.priceTotal = 0;
      this.list.forEach(item => {
        this.priceTotal += Number(item.price);
      })
    },
    companyChange() {

      let comName = "";
      this.supplierList.forEach(it => {
        if(it.supplierId === this.form.companyId)
          comName = it.supplierName;
      })

      this.list.forEach(item => {
        item.companyId = this.form.companyId

        if(this.comName) {
          let arr = item.companyInfo.split(" ");
          arr[0] = comName;
          item.companyInfo = "";
          arr.forEach(a => {
            item.companyInfo += a + " ";
          })

          item.companyInfo = item.companyInfo.trim();
        }else {
          item.companyInfo = comName + " " + item.companyInfo
        }
      })

      this.comName = comName;
    },
    submitList() {
      if(this.list.length === 0) {
        this.msgWarning("请导入数据");
        return
      }
      addCollectList(this.list).then(res => {
        this.msgSuccess("操作成功！");
        this.$emit("close");
        this.$emit("flush");
      })
    },
    handleClear() {
      this.text = undefined;
      this.comName = null;
      this.list = [];
      this.form = {
        offerName: undefined
      }
      this.formulaIndex = undefined;
    },
    handleAddsExp() {
      if(!this.text) {
        return;
      }
      if(!this.form.offerName) {
        this.msgWarning("请选择报价师");
        return
      }
      if(this.formulaIndex == null) {
        this.msgWarning("请选择返利公式");
        return
      }
      let arr = this.text.trim().split("\n");

      arr.forEach(item => {
        let iArr = item.split("\t");
        if(iArr.length === 1)
          iArr = item.split(" ");
        let obj = {
          modelName: iArr[1],
          modelSn: iArr[0],
          companyInfo: (this.comName ? this.comName + " " : '') + iArr[4] + " " + iArr[3],
          price: iArr[2],
          priceOne: null,
          priceTwo: null,
          priceThree: null,
          tranType: 2,
          offerName: this.form.offerName,
          offerTime: this.form.offerTime,
          companyId: this.form.companyId
        }
        this.formulaInfoChange(obj);
        this.list.push(obj);
      })

      this.mathPriceTotal();
    },
    //公式改变事件
    formulaInfoChange(row) {
      if(this.formulaIndex == null || this.formulaIndex === "") {
        row.priceOne = 0;
        row.priceTwo = 0;
        row.priceThree = 0;
        return;
      }
      let formulaInfo = this.formulaOptions[this.formulaIndex];
      row.priceOne = this.priceFormula(formulaInfo.formulaOne, row.price);
      row.priceTwo = this.priceFormula(formulaInfo.formulaTwo, row.price);
      row.priceThree = this.priceFormula(formulaInfo.formulaThree, row.price);
    },
    //返利计算
    priceFormula(formula, price) {
      if(formula == null || formula === '') {
        return 0;
      }
      if(!price)
        return 0;
      let arr = formula.split(",");
      for(let i = 0; i < arr.length; i++) {
        let count = arr[i].substring(0, 1);
        let num = arr[i].substring(1);
        switch (count) {
          case '*':
            price = parseFloat((parseFloat(price) * parseFloat(num)).toFixed(2));break;
          case '/':
            price = parseFloat((parseFloat(price) / parseFloat(num)).toFixed(2));break;
          case '+':
            price = (parseFloat(price) * 100 + parseFloat(num) * 100) / 100;break;
          case '-':
            price = (parseFloat(price) * 100 - parseFloat(num) * 100) / 100;break;
          default:
            price = 0;
            this.msgError("计算方式有误！(" + arr[i] + ")");
        }
      }
      return price.toFixed(0);
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit("close");
          this.comName = null;
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style scoped lang="scss">

</style>
